<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>探花交友-插件 | 谦谦君子</title>
  <meta name="keywords" content=" 探花交友 , 项目 ">
  <meta name="description" content="探花交友-插件 | 谦谦君子">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta property="og:type" content="website">
<meta property="og:title" content="about">
<meta property="og:url" content="https://zhanligui.gitee.io/about/index.html">
<meta property="og:site_name" content="谦谦君子">
<meta property="og:description" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-10-21T09:27:05.000Z">
<meta property="article:modified_time" content="2021-12-06T06:50:36.883Z">
<meta property="article:author" content="谦谦君子">
<meta property="article:tag" content="谦谦君子的个人博客,谦谦君子，湛礼桂">
<meta name="twitter:card" content="summary">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.1.0" rel="stylesheet">

<link href="/css/hl_theme/atom-light.css?v=1.1.0" rel="stylesheet">

<link href="//cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" rel="stylesheet">

<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/js/titleTip.js?v=1.1.0" ></script>

<script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>



<script src="//cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js" ></script>

<script src="/js/iconfont.js?v=1.1.0" ></script>

<meta name="generator" content="Hexo 5.2.0"></head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="">
  <input class="theme_blog_path" value="">
  <input id="theme_shortcut" value="true" />
  <input id="theme_highlight_on" value="true" />
  <input id="theme_code_copy" value="true" />
</div>



<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/"
   class="avatar_target">
    <img class="avatar"
         src="/img/avatar.jpg"/>
</a>
<div class="author">
    <span>谦谦君子</span>
</div>

<div class="icon">
    
        
            <a title="rss"
               href="/atom.xml"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-rss"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="github"
               href="https://github.com/yelog"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="facebook"
               href="https://www.facebook.com/faker.tops"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-facebook"></use>
                    </svg>
                
            </a>
        
    
        
    
        
    
        
            <a title="instagram"
               href="https://www.facebook.com/faker.tops"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-instagram"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="reddit"
               href="https://www.reddit.com/user/yelog/"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-reddit"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="weibo"
               href="http://weibo.com/u/2307534817"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="jianshu"
               href="https://www.jianshu.com/u/ff56736de7cf"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-jianshu"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="zhihu"
               href="https://www.zhihu.com/people/jaytp/activities"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-zhihu"></use>
                    </svg>
                
            </a>
        
    
        
    
        
            <a title="oschina"
               href="https://my.oschina.net/yelog"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-oschina"></use>
                    </svg>
                
            </a>
        
    
        
    
        
            <a title="email"
               href="mailto:jaytp@qq.com"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-email"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="qq"
               href="http://wpa.qq.com/msgrd?v=3&uin=872336115&site=qq&menu=yes"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="kugou"
               href="https://www.kugou.com/"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-kugou"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="neteasemusic"
               href="https://music.163.com/#/user/home?id=88151013"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-neteasemusic"></use>
                    </svg>
                
            </a>
        
    
</div>




<ul>
    <li>
        <div class="all active" data-rel="全部文章">全部文章
            
                <small>(16)</small>
            
        </div>
    </li>
    
        
            
                <li>
                    <div data-rel="技巧">
                        
                        技巧
                        <small>(2)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="面试">
                        
                        面试
                        <small>(3)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="日记">
                        
                        日记
                        <small>(1)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="项目文档">
                        
                        项目文档
                        <small>(6)</small>
                        
                    </div>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="hexo">
                        
                        hexo
                        <small>(2)</small>
                        
                    </div>
                    
                </li>
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
        
            
            
            
    </div>
    <div>
        
            <a class="about  hasFriend  site_url"
               
               href="/about">关于</a>
        
        <a style="width: 50%"
                
                                           class="friends">友链</a>
        
    </div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="16">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="iconfont icon-left"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="http://yelog.org/">叶落阁</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <div class="right-top">
        <div id="default-panel">
            <i class="iconfont icon-search" data-title="搜索 快捷键 i"></i>
            <div class="right-title">全部文章</div>
            <i class="iconfont icon-file-tree" data-title="切换到大纲视图 快捷键 w"></i>
        </div>
        <div id="search-panel">
            <i class="iconfont icon-left" data-title="返回"></i>
            <input id="local-search-input" autocomplete="off"/>
            <label class="border-line" for="input"></label>
            <i class="iconfont icon-case-sensitive" data-title="大小写敏感"></i>
            <i class="iconfont icon-tag" data-title="标签"></i>
        </div>
        <div id="outline-panel" style="display: none">
            <div class="right-title">大纲</div>
            <i class="iconfont icon-list" data-title="切换到文章列表"></i>
        </div>
    </div>

    <div class="tags-list">
    <input id="tag-search" />
    <div class="tag-wrapper">
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>技巧</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>面试</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>前端</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>日记</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>探花交友</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>项目</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>hexo</a>
            </li>
        
    </div>

</div>

    
    <nav id="title-list-nav">
        
        <a  class="全部文章 "
           href="/posts/55136.html"
           data-tag=""
           data-author="" >
            <span class="post-title" title="vue3">vue3</span>
            <span class="post-date" title="2021-12-07 10:07:53">2021/12/07</span>
        </a>
        
        <a  class="全部文章 "
           href="/posts/16107.html"
           data-tag=""
           data-author="" >
            <span class="post-title" title="Hello World">Hello World</span>
            <span class="post-date" title="2021-12-06 14:50:36">2021/12/06</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10003.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第三章 React-native - 基础">第三章 React-native - 基础</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10002.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第二章 探花交友 - 环境搭建">第二章 探花交友 - 环境搭建</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10001.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第一章 探花交友 - Android   课程安排">第一章 探花交友 - Android   课程安排</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10000.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="探花交友-概述">探花交友-概述</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10005.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="探花交友-插件">探花交友-插件</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 项目文档 "
           href="/posts/10004.html"
           data-tag="探花交友,项目"
           data-author="" >
            <span class="post-title" title="第四章 探花交友 - 项目接口文档">第四章 探花交友 - 项目接口文档</span>
            <span class="post-date" title="2020-11-11 11:11:11">2020/11/11</span>
        </a>
        
        <a  class="全部文章 hexo "
           href="/posts/49579.html"
           data-tag="hexo"
           data-author="" >
            <span class="post-title" title="Hexo 加入字数统计 WordCount">Hexo 加入字数统计 WordCount</span>
            <span class="post-date" title="2020-11-04 17:20:29">2020/11/04</span>
        </a>
        
        <a  class="全部文章 hexo "
           href="/posts/21358.html"
           data-tag="hexo"
           data-author="" >
            <span class="post-title" title="生成永久链接(permalink) | hexo">生成永久链接(permalink) | hexo</span>
            <span class="post-date" title="2020-11-04 17:20:29">2020/11/04</span>
        </a>
        
        <a  class="全部文章 技巧 "
           href="/posts/60475.html"
           data-tag="技巧"
           data-author="" >
            <span class="post-title" title="思否免登陆复制方法">思否免登陆复制方法</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 技巧 "
           href="/posts/64216.html"
           data-tag="技巧"
           data-author="" >
            <span class="post-title" title="网页可随意编辑">网页可随意编辑</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/7266.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="数组拷贝的方法">数组拷贝的方法</span>
            <span class="post-date" title="2020-11-04 15:24:21">2020/11/04</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/53209.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="网络协议">网络协议</span>
            <span class="post-date" title="2020-11-02 11:08:31">2020/11/02</span>
        </a>
        
        <a  class="全部文章 面试 "
           href="/posts/43383.html"
           data-tag="面试,前端"
           data-author="" >
            <span class="post-title" title="强缓存和协商缓存">强缓存和协商缓存</span>
            <span class="post-date" title="2020-10-30 14:26:59">2020/10/30</span>
        </a>
        
        <a  class="全部文章 日记 "
           href="/posts/58040.html"
           data-tag="日记"
           data-author="" >
            <span class="post-title" title="今日来了一只不速之客">今日来了一只不速之客</span>
            <span class="post-date" title="2020-10-23 17:39:09">2020/10/23</span>
        </a>
        
        <div id="no-item-tips">

        </div>
    </nav>
    <div id="outline-list">
    </div>
</div>

    </div>
    <div class="hide-list">
        <div class="semicircle" data-title="切换全屏 快捷键 s">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div id="post">
    <div class="pjax">
        <article id="post-探花交友/plugins" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">探花交友-插件</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            <i class="iconfont icon-category"></i>
            
            
            <a  data-rel="项目文档">项目文档</a>
            
        </span>
        
        
        <span class="tag">
            <i class="iconfont icon-tag"></i>
            
            <a class="color5">探花交友</a>
            
            <a class="color3">项目</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
            发布时间 : <time class="date" title='最后更新: 2021-12-06 14:50:36'>2020-11-11 11:11</time>
        
    </div>
    <div class="article-meta">
        
        
        <span id="busuanzi_container_page_pv">
            阅读 :<span id="busuanzi_value_page_pv">
                <span class="count-comment">
                    <span class="spinner">
                      <div class="cube1"></div>
                      <div class="cube2"></div>
                    </span>
                </span>
            </span>
        </span>
        
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#react-navigation"><span class="toc-text">react-navigation</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96"><span class="toc-text">其他</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-svg-uri"><span class="toc-text">react-native-svg-uri</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-tab-navigator"><span class="toc-text">react-native-tab-navigator</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-element"><span class="toc-text">react-native-element</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-linear-gradient"><span class="toc-text">react-native-linear-gradient</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-confirmation-code-field"><span class="toc-text">react-native-confirmation-code-field</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#axios"><span class="toc-text">axios</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Teaset"><span class="toc-text">Teaset</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#svg"><span class="toc-text">svg</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#iconfont%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87"><span class="toc-text">iconfont字体图标</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-datepicker"><span class="toc-text">react-native-datepicker</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-react-native-amap-geolocation"><span class="toc-text">使用 react-native-amap-geolocation</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-react-native-image-crop-picker"><span class="toc-text">使用 react-native-image-crop-picker</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#jmessage-react-plugin"><span class="toc-text">jmessage-react-plugin</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E9%80%9A%E6%9C%8D%E5%8A%A1"><span class="toc-text">开通服务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8"><span class="toc-text">简单使用</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-image-header-scroll-view"><span class="toc-text">react-native-image-header-scroll-view</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B0%8F%E6%8A%80%E5%B7%A7"><span class="toc-text">小技巧</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E9%97%AD%E9%BB%84%E8%89%B2%E8%AD%A6%E5%91%8A"><span class="toc-text">关闭黄色警告</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-deck-swiper"><span class="toc-text">react-native-deck-swiper</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-image-zoom-viewer"><span class="toc-text">react-native-image-zoom-viewer</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#aurora-imui-react-native"><span class="toc-text">aurora-imui-react-native</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-scrollable-tab-view"><span class="toc-text">react-native-scrollable-tab-view</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-text">使用</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#moment"><span class="toc-text">moment</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#react-native-image-picker-%E5%9B%BE%E7%89%87%E9%80%89%E6%8B%A9%E5%B7%A5%E5%85%B7"><span class="toc-text">react-native-image-picker 图片选择工具</span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-3 i,
    .toc-level-3 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="react-navigation"><a href="#react-navigation" class="headerlink" title="react-navigation"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-navigation">react-navigation</a></h1><blockquote>
<p>页面跳转和转场动画</p>
</blockquote>
<ol>
<li><p>安装</p>
<pre><code class="js">yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view  @react-navigation/stack @react-navigation/native</code></pre>
</li>
<li><p>代码</p>
<pre><code class="react">import * as React from &#39;react&#39;;
import &#123; Button, View, Text &#125; from &#39;react-native&#39;;
import &#123; NavigationContainer &#125; from &#39;@react-navigation/native&#39;;
import &#123; createStackNavigator &#125; from &#39;@react-navigation/stack&#39;;

function HomeScreen(&#123; navigation &#125;) &#123;
  return (
    &lt;View style=&#123;&#123; flex: 1, alignItems: 'center', justifyContent: 'center' &#125;&#125;&gt;
      &lt;Text&gt;Home Screen&lt;/Text&gt;
      &lt;Button
        title=&quot;Go to Details&quot;
        onPress=&#123;() =&gt; navigation.navigate(&#39;Details&#39;)&#125;
      /&gt;
    &lt;/View&gt;
  );
&#125;

function DetailsScreen() &#123;
  return (
    &lt;View style=&#123;&#123; flex: 1, alignItems: 'center', justifyContent: 'center' &#125;&#125;&gt;
      &lt;Text&gt;Details Screen&lt;/Text&gt;
    &lt;/View&gt;
  );
&#125;

const Stack = createStackNavigator();

function App() &#123;
  return (
    &lt;NavigationContainer&gt;
      &lt;Stack.Navigator initialRouteName=&quot;Home&quot;&gt;
        &lt;Stack.Screen name=&quot;Home&quot; component=&#123;HomeScreen&#125; /&gt;
        &lt;Stack.Screen name=&quot;Details&quot; component=&#123;DetailsScreen&#125; /&gt;
      &lt;/Stack.Navigator&gt;
    &lt;/NavigationContainer&gt;
  );
&#125;

export default App;
</code></pre>
</li>
</ol>
<h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><ol>
<li><p>跳转页面</p>
<p><a target="_blank" rel="noopener" href="https://reactnavigation.org/docs/navigation-context">类组件</a></p>
<pre><code class="jsx">import &#123; NavigationContext &#125; from &#39;@react-navigation/native&#39;;

class SomeComponent extends React.Component &#123;
  static contextType = NavigationContext;

  render() &#123;
    // We can access navigation object via context
    const navigation = this.context;
  &#125;
&#125;</code></pre>
<p>函数组件</p>
<pre><code class="jsx">import * as React from &#39;react&#39;;
import &#123; Button &#125; from &#39;react-native&#39;;
import &#123; useNavigation &#125; from &#39;@react-navigation/native&#39;;
function MyBackButton() &#123;
  const navigation = useNavigation();
  return (
    &lt;Button
      title=&quot;Back&quot;
      onPress=&#123;() =&gt; &#123;
        navigation.goBack();
      &#125;&#125;
    /&gt;
  );
&#125;</code></pre>
</li>
</ol>
<h1 id="react-native-svg-uri"><a href="#react-native-svg-uri" class="headerlink" title="react-native-svg-uri"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-svg-uri">react-native-svg-uri</a></h1><blockquote>
<p>rn中使用svg技术</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn  add  react-native-svg-uri react-native-svg</code></pre>
</li>
<li><p>代码</p>
<pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View, Text &#125; from &#39;react-native&#39;;
import SvgUri from &#39;react-native-svg-uri&#39;;
class Index extends Component &#123;
  render() &#123;
    return (
      &lt;View&gt;
        &lt;SvgUri width=&quot;23&quot; height=&quot;23&quot; svgXmlData=&#123;&#39;&lt;svg t=&quot;1568188030646&quot;  viewBox=&quot;0 0 1024 1024&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; p-id=&quot;7085&quot; width=&quot;64&quot; height=&quot;64&quot;&gt;&lt;path d=&quot;M515.3 597.2c-72.6 0-140.8-28.3-192.2-79.6-51.3-51.3-79.6-119.6-79.6-192.2s28.3-140.8 79.6-192.2 119.6-79.6 192.2-79.6 140.8 28.3 192.2 79.6 79.6 119.6 79.6 192.2-28.3 140.8-79.6 192.2c-51.4 51.3-119.6 79.6-192.2 79.6z m0-503.5c-61.9 0-120.1 24.1-163.9 67.9s-67.9 102-67.9 163.9 24.1 120.1 67.9 163.9c43.8 43.8 102 67.9 163.9 67.9 61.9 0 120.1-24.1 163.9-67.9 43.8-43.8 67.9-102 67.9-163.9 0-61.9-24.1-120.1-67.9-163.9-43.8-43.8-102-67.9-163.9-67.9zM994.9 915.6H62.3l3.8-23.3c12.4-75 51.3-143.9 109.6-194 59-50.6 134-78.5 211.3-78.5h283.1c77.3 0 152.3 27.9 211.3 78.5 58.3 50 97.2 118.9 109.6 194l3.9 23.3z m-884.4-40h836.2c-14.4-56.7-46.2-108.2-91.3-146.9-51.7-44.3-117.5-68.7-185.2-68.7H387c-67.7 0-133.5 24.4-185.2 68.8-45.1 38.7-77 90.2-91.3 146.8z&quot; p-id=&quot;7086&quot; fill=&quot;#999999&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M448.1 640L513 841l80-201zM437.7 345c-12.1 0-21.9-9.9-21.9-21.9V269c0-12.1 9.9-21.9 21.9-21.9 12.1 0 21.9 9.9 21.9 21.9v54.1c0.1 12-9.8 21.9-21.9 21.9zM573.2 345c-12.1 0-21.9-9.9-21.9-21.9V269c0-12.1 9.9-21.9 21.9-21.9 12.1 0 21.9 9.9 21.9 21.9v54.1c0.1 12-9.8 21.9-21.9 21.9z&quot; p-id=&quot;7087&quot; fill=&quot;#999999&quot; &gt;&lt;/path&gt;&lt;/svg&gt;&#39;&#125; /&gt;
      &lt;/View&gt;
    );
  &#125;
&#125;
export default Index;</code></pre>
</li>
</ol>
<h1 id="react-native-tab-navigator"><a href="#react-native-tab-navigator" class="headerlink" title="react-native-tab-navigator"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-tab-navigator">react-native-tab-navigator</a></h1><blockquote>
<p>底部导航栏</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add react-native-tab-navigator</code></pre>
</li>
<li><p>代码</p>
<p>要有 SvgUri 和 Friend 等其他依赖</p>
<pre><code class="jsx">import React, &#123; Component &#125; from &#39;react&#39;;
import &#123; View, Text,StyleSheet &#125; from &#39;react-native&#39;;
import SvgUri from &#39;react-native-svg-uri&#39;;
import Friend from &quot;./pages/friend&quot;;
import Group from &quot;./pages/group&quot;;
import Message from &quot;./pages/message&quot;;
import My from &quot;./pages/my&quot;;
import TabNavigator from &#39;react-native-tab-navigator&#39;;
import SvgData from &quot;./res/svg&quot;;
const dataSource = [
  &#123;
    icon: SvgData.friend,
    selectedIcon: SvgData.selectdFriend,
    tabPage: &#39;Friend&#39;,
    tabName: &#39;交友&#39;,
    badge: 0,
    component: Friend
  &#125;,
  &#123;
    icon: SvgData.group,
    selectedIcon:  SvgData.selectdGroup,
    tabPage: &#39;Group&#39;,
    tabName: &#39;圈子&#39;,
    badge: 0,
    component: Group
  &#125;,
  &#123;
    icon: SvgData.message,
    selectedIcon:SvgData.selectdMessage,
    tabPage: &#39;Message&#39;,
    tabName: &#39;消息&#39;,
    badge: 5,
    component: Message
  &#125;,
  &#123;
    icon: SvgData.my,
    selectedIcon: SvgData.selectdMy,
    tabPage: &#39;My&#39;,
    tabName: &#39;我的&#39;,
    badge: 0,
    component: My
  &#125;

];

class Index extends Component &#123;
  state = &#123;
    selectedTab: &quot;Friend&quot;
  &#125;
  render() &#123;
    return (
      &lt;View style=&#123;&#123; flex: 1, backgroundColor: '#F5FCFF' &#125;&#125;&gt;
        &lt;TabNavigator   &gt;
          &#123;dataSource.map((v, i) =&gt; &#123;
            return (
              &lt;TabNavigator.Item
                key=&#123;i&#125;
                selected=&#123;this.state.selectedTab === v.tabPage&#125;
                title=&#123;v.tabName&#125;
                tabStyle=&#123;stylesheet.tab&#125;
                titleStyle=&#123;&#123; color: '#999999' &#125;&#125;
                selectedTitleStyle=&#123;&#123; color: '#c863b5' &#125;&#125;
                renderIcon=&#123;() =&gt; &lt;SvgUri width=&quot;23&quot; height=&quot;23&quot; svgXmlData=&#123;v.icon&#125; /&gt;&#125;
                renderSelectedIcon=&#123;() =&gt; &lt;SvgUri width=&quot;23&quot; height=&quot;23&quot; svgXmlData=&#123;v.selectedIcon&#125; /&gt;&#125;
                badgeText=&#123;v.badge&#125;
                onPress=&#123;() =&gt; this.setState(&#123; selectedTab: v.tabPage &#125;)&#125;&gt;
                &lt;v.component  /&gt;
              &lt;/TabNavigator.Item&gt;
            )
          &#125;)&#125;
        &lt;/TabNavigator&gt;
      &lt;/View&gt;
    )
  &#125;
&#125;
const stylesheet = StyleSheet.create(&#123;
  tab: &#123;
    justifyContent: &quot;center&quot;
  &#125;,
  tabIcon: &#123;
    color: &quot;#999&quot;,
    width: 23,
    height: 23
  &#125;
&#125;)
export default Index;</code></pre>
</li>
</ol>
<h1 id="react-native-element"><a href="#react-native-element" class="headerlink" title="react-native-element"></a><a target="_blank" rel="noopener" href="https://react-native-elements.github.io/react-native-elements/docs/getting_started.html">react-native-element</a></h1><blockquote>
<p>一套ui库 内置常用组件</p>
</blockquote>
<ol>
<li><p>下载</p>
<p>需要使用到图标 因此也需要安装 <code>react-native-vector-icons</code></p>
<pre><code class="js">yarn add react-native-elements react-native-vector-icons</code></pre>
</li>
<li><p>引入和使用</p>
<pre><code class="jsx">import &#123; Icon &#125; from &#39;react-native-elements&#39;

&lt;Icon
  name=&#39;rowing&#39; /&gt;</code></pre>
</li>
<li><p><a target="_blank" rel="noopener" href="https://github.com/oblador/react-native-vector-icons">react-native-vector-icons</a> 的其他使用</p>
<ol>
<li><p>编辑 <code>android/app/build.gradle</code> </p>
</li>
<li><p>添加以下配置</p>
<pre><code class="jsx">project.ext.vectoricons = [
    iconFontNames: [ &#39;MaterialIcons.ttf&#39;, &#39;EvilIcons.ttf&#39; ] // Name of the font files you want to copy
]

apply from: &quot;../../node_modules/react-native-vector-icons/fonts.gradle&quot;</code></pre>
</li>
<li><p>重启项目</p>
</li>
<li><p>添加代码 如</p>
<pre><code class="jsx">import FontAwesome5 from &#39;react-native-vector-icons/FontAwesome5&#39;;

const icon = &lt;FontAwesome5 name=&#123;&#39;comments&#39;&#125; /&gt;;</code></pre>
</li>
</ol>
</li>
</ol>
<h1 id="react-native-linear-gradient"><a href="#react-native-linear-gradient" class="headerlink" title="react-native-linear-gradient"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-linear-gradient">react-native-linear-gradient</a></h1><blockquote>
<p>渐变容器</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add react-native-linear-gradient</code></pre>
</li>
<li><p>简单使用</p>
<pre><code class="jsx">import LinearGradient from &#39;react-native-linear-gradient&#39;;

&lt;LinearGradient colors=&#123;[&#39;#4c669f&#39;, &#39;#3b5998&#39;, &#39;#192f6a&#39;]&#125; style=&#123;styles.linearGradient&#125;&gt;
  &lt;Text style=&#123;styles.buttonText&#125;&gt;
    Sign in with Facebook
  &lt;/Text&gt;
&lt;/LinearGradient&gt;

var styles = StyleSheet.create(&#123;
  linearGradient: &#123;
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  &#125;,
  buttonText: &#123;
    fontSize: 18,
    fontFamily: &#39;Gill Sans&#39;,
    textAlign: &#39;center&#39;,
    margin: 10,
    color: &#39;#ffffff&#39;,
    backgroundColor: &#39;transparent&#39;,
  &#125;,
&#125;);</code></pre>
</li>
</ol>
<h1 id="react-native-confirmation-code-field"><a href="#react-native-confirmation-code-field" class="headerlink" title="react-native-confirmation-code-field"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-confirmation-code-field">react-native-confirmation-code-field</a></h1><blockquote>
<p>验证码输入框</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add react-native-confirmation-code-field</code></pre>
</li>
<li><p>代码</p>
<pre><code class="jsx">import React, &#123;useState&#125; from &#39;react&#39;;
import &#123;SafeAreaView, Text, StyleSheet&#125; from &#39;react-native&#39;;

import &#123;
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
&#125; from &#39;react-native-confirmation-code-field&#39;;

const styles = StyleSheet.create(&#123;
  root: &#123;flex: 1, padding: 20&#125;,
  title: &#123;textAlign: &#39;center&#39;, fontSize: 30&#125;,
  codeFiledRoot: &#123;marginTop: 20&#125;,
  cell: &#123;
    width: 40,
    height: 40,
    lineHeight: 38,
    fontSize: 24,
    borderWidth: 2,
    borderColor: &#39;#00000030&#39;,
    textAlign: &#39;center&#39;,
  &#125;,
  focusCell: &#123;
    borderColor: &#39;#000&#39;,
  &#125;,
&#125;);

const CELL_COUNT = 6;

const App = () =&gt; &#123;
  const [value, setValue] = useState(&#39;&#39;);
  const ref = useBlurOnFulfill(&#123;value, cellCount: CELL_COUNT&#125;);
  const [props, getCellOnLayoutHandler] = useClearByFocusCell(&#123;
    value,
    setValue,
  &#125;);

  return (
    &lt;SafeAreaView style=&#123;styles.root&#125;&gt;
      &lt;Text style=&#123;styles.title&#125;&gt;Verification&lt;/Text&gt;
      &lt;CodeField
        ref=&#123;ref&#125;
        &#123;...props&#125;
        value=&#123;value&#125;
        onChangeText=&#123;setValue&#125;
        cellCount=&#123;CELL_COUNT&#125;
        rootStyle=&#123;styles.codeFiledRoot&#125;
        keyboardType=&quot;number-pad&quot;
        textContentType=&quot;oneTimeCode&quot;
        renderCell=&#123;(&#123;index, symbol, isFocused&#125;) =&gt; (
          &lt;Text
            key=&#123;index&#125;
            style=&#123;[styles.cell, isFocused &amp;&amp; styles.focusCell]&#125;
            onLayout=&#123;getCellOnLayoutHandler(index)&#125;&gt;
            &#123;symbol || (isFocused ? &lt;Cursor /&gt; : null)&#125;
          &lt;/Text&gt;
        )&#125;
      /&gt;
    &lt;/SafeAreaView&gt;
  );
&#125;;

export default App;</code></pre>
</li>
</ol>
<h1 id="axios"><a href="#axios" class="headerlink" title="axios"></a><a target="_blank" rel="noopener" href="https://github.com/axios/axios">axios</a></h1><blockquote>
<p>流行的异步请求库</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add axios</code></pre>
</li>
</ol>
<h1 id="Teaset"><a href="#Teaset" class="headerlink" title="Teaset"></a><a target="_blank" rel="noopener" href="https://github.com/rilyu/teaset/blob/HEAD/docs/cn/README.md">Teaset</a></h1><blockquote>
<p>React Native UI 组件库, 超过 20 个纯 JS(ES6) 组件, 专注于内容展示和操作控制</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add teaset</code></pre>
</li>
</ol>
<h1 id="svg"><a href="#svg" class="headerlink" title="svg"></a>svg</h1><blockquote>
<p>因为在rn中 使用普通的字体图标是没有多种颜色的如</p>
</blockquote>
<p><img src="/friend/image-20200605103850857.png" alt="image-20200605103850857"></p>
<ol>
<li><p>下载依赖</p>
<pre><code class="js">yarn add react-native-svg react-native-svg-uri</code></pre>
</li>
<li><p>复制 示例demo中svg源代码</p>
<p><img src="/friend/image-20200605104237256.png" alt="image-20200605104237256"></p>
</li>
<li><p>代码中使用</p>
<pre><code class="jsx">import SvgUri from &#39;react-native-svg-uri&#39;;
const female=&#39;&lt;svg ......&#39;;

&lt;SvgUri width=&quot;23&quot; height=&quot;23&quot; svgXmlData=&#123;female&#125; /&gt;</code></pre>
</li>
</ol>
<h1 id="iconfont字体图标"><a href="#iconfont字体图标" class="headerlink" title="iconfont字体图标"></a>iconfont字体图标</h1><ol>
<li><p>在字体图标网站上下载 字体 </p>
</li>
<li><p>然后拷贝 ttf后缀的文件到 <code>android\app\src\main\assets\fonts</code>中  如果没有<code>assets</code>文件夹可以新建一个</p>
</li>
<li><p>然后 给 <code>Text</code> 标签 设置</p>
<p><img src="/friend/image-20200605105305029.png" alt="image-20200605105305029"></p>
<pre><code class="jsx"> &lt;Text style=&#123;&#123; fontFamily: "iconfont", color: "red" &#125;&#125; &gt;&#123;&#39;\ue82b&#39;&#125;&lt;/Text&gt;</code></pre>
</li>
<li><p>然后记得重启项目</p>
</li>
</ol>
<h1 id="react-native-datepicker"><a href="#react-native-datepicker" class="headerlink" title="react-native-datepicker"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-datepicker">react-native-datepicker</a></h1><blockquote>
<p>日期选择框</p>
</blockquote>
<ol>
<li><p>安装</p>
<pre><code class="js">yarn add  react-native-datepicker </code></pre>
</li>
<li><p>引入</p>
<pre><code class="js">import DatePicker from &#39;react-native-datepicker&#39;;</code></pre>
</li>
<li><p>使用</p>
<pre><code class="react"> &lt;DatePicker
              style=&#123;&#123; width: Styleskits.screen.width - 50 &#125;&#125; 
              mode=&quot;date&quot;
              placeholder=&quot;设置生日&quot;
              format=&quot;YYYY-MM-DD&quot;
              confirmBtnText=&quot;Confirm&quot;
              cancelBtnText=&quot;Cancel&quot;
              iconComponent=&#123;&lt;Icon name=&quot;angle-down&quot;   /&gt;&#125;
              androidMode=&quot;spinner&quot;
              customStyles=&#123;&#123;
                   dateInput: &#123;
                     borderWidth: 0,
                     borderBottomWidth: 1.1,
                     alignItems:"flex-start",
                     paddingLeft:6,
                     textAlign:"left"
                   &#125;,
                   placeholderText:&#123;
                     fontSize:18,
                     color:"#afafaf"
                   &#125;
                 &#125;&#125;
              onDateChange=&#123;(date) =&gt; &#123; this.setState(&#123; birthday: date &#125;) &#125;&#125;
     /&gt;</code></pre>
</li>
</ol>
<h1 id="使用-react-native-amap-geolocation"><a href="#使用-react-native-amap-geolocation" class="headerlink" title="使用 react-native-amap-geolocation"></a>使用 <a target="_blank" rel="noopener" href="https://github.com/qiuxiang/react-native-amap-geolocation">react-native-amap-geolocation</a></h1><blockquote>
<p>高德地图组件</p>
<p>分别使用了两个功能，一个是AndroidSDK和一个web服务</p>
</blockquote>
<ol>
<li><p><a target="_blank" rel="noopener" href="https://lbs.amap.com/api/android-location-sdk/guide/create-project/get-key">申请 高度地图的key</a></p>
</li>
<li><p>下载依赖</p>
<pre><code class="js">yarn add  react-native-amap-geolocation</code></pre>
</li>
<li><p>配置文件</p>
<ol>
<li><p>编辑 <code>android/settings.gradle</code>，设置项目路径：</p>
<pre><code class="diff">+ include &#39;:react-native-amap-geolocation&#39;
+ project(&#39;:react-native-amap-geolocation&#39;).projectDir = new File(rootProject.projectDir, &#39;../node_modules/react-native-amap-geolocation/lib/android&#39;)</code></pre>
</li>
<li><p>编辑 <code>android/app/build.gradle</code>，新增依赖：</p>
<pre><code class="diff">dependencies &#123;
+   implementation project(&#39;:react-native-amap-geolocation&#39;)
&#125;</code></pre>
</li>
<li><p>编辑 <code>MainApplication.java</code>：</p>
<pre><code class="diff">+ import cn.qiuxiang.react.geolocation.AMapGeolocationPackage;

public class MainApplication extends Application implements ReactApplication &#123;
  @Override
        protected List&lt;ReactPackage&gt; getPackages() &#123;
          @SuppressWarnings(&quot;UnnecessaryLocalVariable&quot;)
          List&lt;ReactPackage&gt; packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
+         packages.add(new AMapGeolocationPackage());
          return packages;
        &#125;
&#125;</code></pre>
</li>
</ol>
</li>
<li><p>代码</p>
<pre><code class="js">
import &#123; PermissionsAndroid, Platform &#125; from &quot;react-native&quot;;
import &#123; init, Geolocation &#125; from &quot;react-native-amap-geolocation&quot;;
import axios from &quot;axios&quot;;
class Geo &#123;
  async initGeo() &#123;
    if (Platform.OS === &quot;android&quot;) &#123;
      await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION);
    &#125;
    await init(&#123;
      ios: &quot;e8b092f4b23cef186bd1c4fdd975bf38&quot;,
      android: &quot;e8b092f4b23cef186bd1c4fdd975bf38&quot;
    &#125;);
    return Promise.resolve();
  &#125;
  async getCurrentPosition() &#123;
    return new Promise((resolve, reject) =&gt; &#123;
      console.log(&quot;开始定位&quot;);
      Geolocation.getCurrentPosition((&#123; coords &#125;) =&gt; &#123;
        resolve(coords);
      &#125;, reject);
    &#125;)
  &#125;
  async getCityByLocation() &#123;
    const &#123; longitude, latitude &#125; = await this.getCurrentPosition();
    const res = await axios.get(&quot;https://restapi.amap.com/v3/geocode/regeo&quot;, &#123;
      params: &#123; location: `$&#123;longitude&#125;,$&#123;latitude&#125;`, key: &quot;83e9dd6dfc3ad5925fc228c14eb3b4d6&quot;, &#125;
    &#125;);
    return Promise.resolve(res.data);
  &#125;
&#125;

</code></pre>
</li>
</ol>
<p>   export default new Geo();</p>
<pre><code>


#  [react-native-picker](https://www.npmjs.com/package/react-native-picker)

&gt; 自定义picker

1. 安装
</code></pre>
<p>   yarn add react-native-picker</p>
<pre><code>
2. 代码

```react
import Picker from &#39;react-native-picker&#39;;
    Picker.init(&#123;
      pickerData: CityJson,
      selectedValue: [&quot;北京&quot;, &quot;北京&quot;],
      wheelFlex: [1, 1, 0], // 显示省和市
      pickerConfirmBtnText: &quot;确定&quot;,
      pickerCancelBtnText: &quot;取消&quot;,
      pickerTitleText: &quot;选择城市&quot;,
      onPickerConfirm: data =&gt; &#123;
        // data =  [广东，广州，天河]
        this.setState(
          &#123;
            city: data[1]
          &#125;
        );
      &#125;
    &#125;);
    Picker.show();</code></pre>
<h1 id="使用-react-native-image-crop-picker"><a href="#使用-react-native-image-crop-picker" class="headerlink" title="使用 react-native-image-crop-picker"></a>使用 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-image-crop-picker">react-native-image-crop-picker</a></h1><blockquote>
<p>图片裁切组件</p>
</blockquote>
<ol>
<li><p>安装</p>
<pre><code>yarn add  react-native-image-crop-picker </code></pre>
</li>
<li><p>使用</p>
<pre><code class="react">import ImagePicker from &#39;react-native-image-crop-picker&#39;;

    ImagePicker.openPicker(&#123;
      width: 300,
      height: 400,
      cropping: true
    &#125;).then(image =&gt; &#123;
      console.log(image);
    &#125;);</code></pre>
</li>
</ol>
<h1 id="jmessage-react-plugin"><a href="#jmessage-react-plugin" class="headerlink" title="jmessage-react-plugin"></a><a target="_blank" rel="noopener" href="https://github.com/jpush/jmessage-react-plugin">jmessage-react-plugin</a></h1><blockquote>
<p>极光推送 react-native 版本</p>
</blockquote>
<h2 id="开通服务"><a href="#开通服务" class="headerlink" title="开通服务"></a><a target="_blank" rel="noopener" href="https://www.jiguang.cn/">开通服务</a></h2><ol>
<li>首先 需要我们自己先在极光上注册账号 开通服务,拿到对应的密钥</li>
</ol>
<h2 id="简单使用"><a href="#简单使用" class="headerlink" title="简单使用"></a>简单使用</h2><ol>
<li><p>安装依赖</p>
<pre><code class="js">yarn add jmessage-react-plugin jcore-react-native</code></pre>
</li>
<li><p>配置</p>
<ol>
<li><p><code>android\app\src\main\AndroidManifest.xml</code> 加入以下代码</p>
<pre><code class="xml">      &lt;activity android:name=&quot;com.facebook.react.devsupport.DevSettingsActivity&quot; /&gt;
      &lt;!-- 极光的配置 --&gt;
      &lt;meta-data android:name=&quot;JPUSH_CHANNEL&quot; android:value=&quot;$&#123;APP_CHANNEL&#125;&quot; /&gt;
      &lt;meta-data android:name=&quot;JPUSH_APPKEY&quot; android:value=&quot;$&#123;JPUSH_APPKEY&#125;&quot; /&gt;
      &lt;!-- 极光的配置 --&gt;
    &lt;/application&gt;</code></pre>
</li>
<li><p><code>android\app\build.gradle</code> 加入以下代码和按需修改</p>
<pre><code class="js">android &#123;
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions &#123;
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    &#125;

    defaultConfig &#123;
        applicationId &quot;com.awesomeproject22&quot;
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName &quot;1.0&quot;
        multiDexEnabled true // 新增的
        manifestPlaceholders = [
        JPUSH_APPKEY: &quot;c0c08d3d8babc318fe25bb0c&quot;,    //在此替换你的APPKey
        APP_CHANNEL: &quot;developer-default&quot;        //应用渠道号
        ]
    &#125;</code></pre>
<hr>
<pre><code class="js">dependencies &#123;
    implementation fileTree(dir: &quot;libs&quot;, include: [&quot;*.jar&quot;])
    implementation &quot;com.facebook.react:react-native:+&quot;  // From node_modules
    compile project(&#39;:jmessage-react-plugin&#39;) // 新增的
    compile project(&#39;:jcore-react-native&#39;)  // 新增的
    if (enableHermes) &#123;
        def hermesPath = &quot;../../node_modules/hermes-engine/android/&quot;;
        debugImplementation files(hermesPath + &quot;hermes-debug.aar&quot;)
        releaseImplementation files(hermesPath + &quot;hermes-release.aar&quot;)
    &#125; else &#123;
        implementation jscFlavor
    &#125;
&#125;</code></pre>
</li>
<li><p>根目录下新建文件和添加以下配置 <code>react-native.config.js</code></p>
<pre><code class="js">module.exports = &#123;
  dependencies: &#123;
    &#39;jmessage-react-plugin&#39;: &#123;
      platforms: &#123;
        android: &#123;
          packageInstance: &#39;new JMessageReactPackage(false)&#39;
        &#125;
      &#125;
    &#125;,
  &#125;
&#125;;</code></pre>
</li>
<li><p><code>android\settings.gradle</code> 加入如下配置</p>
<pre><code class="js">include &#39;:jmessage-react-plugin&#39;
project(&#39;:jmessage-react-plugin&#39;).projectDir = new File(rootProject.projectDir, &#39;../node_modules/jmessage-react-plugin/android&#39;)
include &#39;:jcore-react-native&#39;
project(&#39;:jcore-react-native&#39;).projectDir = new File(rootProject.projectDir, &#39;../node_modules/jcore-react-native/android&#39;)</code></pre>
</li>
</ol>
</li>
<li><p>在 根组件中进行测试 <code>App.js</code></p>
<pre><code class="react">import React from &#39;react&#39;;
import &#123; View, Text &#125; from &quot;react-native&quot;;
import JMessage from &quot;jmessage-react-plugin&quot;;
class App extends React.Component &#123;
  componentDidMount() &#123;
    JMessage.init(&#123;
      &#39;appkey&#39;: &#39;c0c08d3d8babc318fe25bb0c&#39;,
      &#39;isOpenMessageRoaming&#39;: true,
      &#39;isProduction&#39;: false,
      &#39;channel&#39;: &#39;&#39; 
    &#125;)

    JMessage.login(&#123;
      username: &quot;18665711956&quot;,
      password: &quot;18665711956&quot;
    &#125;, (res) =&gt; &#123;
      console.log(&quot;登录成功&quot;);
      console.log(res);
    &#125;, (err) =&gt; &#123;
      console.log(&quot;登录失败&quot;);
      console.log(err);
    &#125;)

  &#125;
  render() &#123;
    return (
      &lt;View&gt;
        &lt;Text&gt;goods&lt;/Text&gt;
      &lt;/View&gt;
    );
  &#125;
&#125;
export default App;</code></pre>
</li>
</ol>
<h1 id="react-native-image-header-scroll-view"><a href="#react-native-image-header-scroll-view" class="headerlink" title="react-native-image-header-scroll-view"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-image-header-scroll-view">react-native-image-header-scroll-view</a></h1><blockquote>
<p>顶部吸顶效果</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add react-native-image-header-scroll-view </code></pre>
</li>
</ol>
<h1 id="小技巧"><a href="#小技巧" class="headerlink" title="小技巧"></a>小技巧</h1><h2 id="关闭黄色警告"><a href="#关闭黄色警告" class="headerlink" title="关闭黄色警告"></a>关闭黄色警告</h2><pre><code class="jsx">console.ignoredYellowBox = [&#39;Warning: BackAndroid is deprecated. Please use BackHandler instead.&#39;,&#39;source.uri should not be an empty string&#39;,&#39;Invalid props.style key&#39;];

console.disableYellowBox = true // 关闭全部黄色警告</code></pre>
<h1 id="react-native-deck-swiper"><a href="#react-native-deck-swiper" class="headerlink" title="react-native-deck-swiper"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-deck-swiper">react-native-deck-swiper</a></h1><blockquote>
<p>类似轮播图的滑动组件</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add react-native-view-overflow  react-native-deck-swiper</code></pre>
</li>
<li><p>示例demo</p>
<pre><code class="jsx">import Swiper from &quot;react-native-deck-swiper&quot;;

render () &#123;
    &lt;View style=&#123;styles.container&#125;&gt;
        &lt;Swiper
            cards=&#123;[&#39;DO&#39;, &#39;MORE&#39;, &#39;OF&#39;, &#39;WHAT&#39;, &#39;MAKES&#39;, &#39;YOU&#39;, &#39;HAPPY&#39;]&#125;
            renderCard=&#123;(card) =&gt; &#123;
                return (
                    &lt;View style=&#123;styles.card&#125;&gt;
                        &lt;Text style=&#123;styles.text&#125;&gt;&#123;card&#125;&lt;/Text&gt;
                    &lt;/View&gt;
                )
            &#125;&#125;
            onSwiped=&#123;(cardIndex) =&gt; &#123;console.log(cardIndex)&#125;&#125;
            onSwipedAll=&#123;() =&gt; &#123;console.log(&#39;onSwipedAll&#39;)&#125;&#125;
            cardIndex=&#123;0&#125;
            backgroundColor=&#123;&#39;#4FD0E9&#39;&#125;
            stackSize= &#123;3&#125;&gt;
            &lt;Button
                onPress=&#123;() =&gt; &#123;console.log(&#39;oulala&#39;)&#125;&#125;
                title=&quot;Press me&quot;&gt;
                You can press me
            &lt;/Button&gt;
        &lt;/Swiper&gt;
    &lt;/View&gt;
&#125;

const styles = StyleSheet.create(&#123;
  container: &#123;
    flex: 1,
    backgroundColor: &quot;#F5FCFF&quot;
  &#125;,
  card: &#123;
    flex: 1,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: &quot;#E8E8E8&quot;,
    justifyContent: &quot;center&quot;,
    backgroundColor: &quot;white&quot;
  &#125;,
  text: &#123;
    textAlign: &quot;center&quot;,
    fontSize: 50,
    backgroundColor: &quot;transparent&quot;
  &#125;
&#125;);</code></pre>
</li>
</ol>
<h1 id="react-native-image-zoom-viewer"><a href="#react-native-image-zoom-viewer" class="headerlink" title="react-native-image-zoom-viewer"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-image-zoom-viewer">react-native-image-zoom-viewer</a></h1><blockquote>
<p>图片缩放组件</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code>yarn add react-native-image-zoom-viewer</code></pre>
</li>
<li><p>代码</p>
<pre><code class="jsx">import &#123; Modal &#125; from &#39;react-native&#39;;
import ImageViewer from &#39;react-native-image-zoom-viewer&#39;;

const images = [&#123;
  // Simplest usage.
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&amp;s=460&#39;,

  // width: number
  // height: number
  // Optional, if you know the image size, you can set the optimization performance

  // You can pass props to &lt;Image /&gt;.
  props: &#123;
    // headers: ...
  &#125;
&#125;, &#123;
  url: &#39;&#39;,
  props: &#123;
    // Or you can set source directory.
    source: require(&#39;../background.png&#39;)
  &#125;
&#125;]

export default class App extends React.Component &#123;
  render: function() &#123;
  return (
    &lt;Modal visible=&#123;true&#125; transparent=&#123;true&#125;&gt;
      &lt;ImageViewer imageUrls=&#123;images&#125; /&gt;
    &lt;/Modal&gt;
  )
&#125;
&#125;</code></pre>
</li>
</ol>
<h1 id="aurora-imui-react-native"><a href="#aurora-imui-react-native" class="headerlink" title="aurora-imui-react-native"></a><a target="_blank" rel="noopener" href="https://github.com/jpush/aurora-imui/blob/master/README_zh.md">aurora-imui-react-native</a></h1><blockquote>
<p>Aurora IMUI 是个通用的即时通讯（IM）UI 库，不特定于任何 IM SDK。</p>
<p>本 UI 库提供了消息列表、输入视图等常用组件，支持常见的消息类型：文字、图片、语音、视频等。默认包含多套界面风格，也能根据自己的需要自定义。</p>
</blockquote>
<ol>
<li><p>安装</p>
<pre><code class="js">yarn  add  aurora-imui-react-native  react-native-fs</code></pre>
</li>
<li><p>配置 <code>引入 Package</code></p>
<blockquote>
<p>MainApplication.java</p>
</blockquote>
<pre><code class="js">import cn.jiguang.imui.messagelist.ReactIMUIPackage; // 新增的

@Override
        protected List&lt;ReactPackage&gt; getPackages() &#123;
          @SuppressWarnings(&quot;UnnecessaryLocalVariable&quot;)
          List&lt;ReactPackage&gt; packages = new PackageList(this).getPackages();
           packages.add(new AMapGeolocationPackage());
           packages.add(new ReactIMUIPackage()); // 新增的
          return packages;
        &#125;</code></pre>
</li>
<li><p><code>android\settings.gradle</code> 添加配置</p>
<pre><code class="js">include &#39;:app&#39;, &#39;:aurora-imui-react-native&#39;
project(&#39;:aurora-imui-react-native&#39;).projectDir = new File(rootProject.projectDir, &#39;../node_modules/aurora-imui-react-native/ReactNative/android&#39;)</code></pre>
</li>
<li><p><code>android\app\build.gradle</code> 添加配置</p>
<pre><code class="js">dependencies &#123;
    ...
    implementation project(&#39;:aurora-imui-react-native&#39;)</code></pre>
</li>
<li><p><code>android\app\src\main\AndroidManifest.xml</code> </p>
<pre><code class="xml">&lt;manifest 
 xmlns:tools=&quot;http://schemas.android.com/tools&quot; // 这里是新添加的
&gt;
    &lt;application
      android:allowBackup=&quot;false&quot;
      tools:replace=&quot;android:allowBackup&quot; // 这里是新添加的
      &gt;</code></pre>
</li>
<li><p><a target="_blank" rel="noopener" href="https://github.com/jpush/aurora-imui/blob/master/ReactNative/sample/App.js">实例demo</a></p>
</li>
</ol>
<h1 id="react-native-scrollable-tab-view"><a href="#react-native-scrollable-tab-view" class="headerlink" title="react-native-scrollable-tab-view"></a><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/react-native-scrollable-tab-view">react-native-scrollable-tab-view</a></h1><blockquote>
<p>顶部tab栏</p>
</blockquote>
<h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><ol>
<li><p>安装依赖</p>
<pre><code>yarn add   react-native-scrollable-tab-view @react-native-community/viewpager</code></pre>
</li>
<li><p>使用</p>
<blockquote>
<p>标签最外层必须为 <code>ScrollableTabView</code></p>
</blockquote>
<pre><code class="jsx">
import React from &#39;react&#39;;
import &#123;
  Text,
&#125; from &#39;react-native&#39;;

import ScrollableTabView, &#123; DefaultTabBar &#125; from &#39;react-native-scrollable-tab-view&#39;;

export default () =&gt; &#123;
  return &lt;ScrollableTabView
    style=&#123;&#123; marginTop: 20 &#125;&#125;
    initialPage=&#123;1&#125;
    renderTabBar=&#123;() =&gt; &lt;DefaultTabBar /&gt;&#125;
  &gt;
    &lt;Text tabLabel=&#39;Tab #1&#39;&gt;My&lt;/Text&gt;
    &lt;Text tabLabel=&#39;Tab #2&#39;&gt;favorite&lt;/Text&gt;
    &lt;Text tabLabel=&#39;Tab #3&#39;&gt;project&lt;/Text&gt;
  &lt;/ScrollableTabView&gt;;
&#125;</code></pre>
</li>
</ol>
<h1 id="moment"><a href="#moment" class="headerlink" title="moment"></a><a target="_blank" rel="noopener" href="http://momentjs.cn/">moment</a></h1><blockquote>
<p>流行的日期库</p>
</blockquote>
<ol>
<li><p>下载</p>
<pre><code class="js">yarn add moment   </code></pre>
</li>
<li><p>设置语言</p>
<pre><code class="js">import moment from &quot;moment&quot;;
import &#39;moment/locale/zh-cn&#39;;
moment.locale(&#39;zh-cn&#39;);

export default moment;</code></pre>
</li>
</ol>
<h1 id="react-native-image-picker-图片选择工具"><a href="#react-native-image-picker-图片选择工具" class="headerlink" title="react-native-image-picker 图片选择工具"></a><a target="_blank" rel="noopener" href="https://github.com/react-native-community/react-native-image-picker">react-native-image-picker 图片选择工具</a></h1><ol>
<li><p>安装</p>
<pre><code class="js">yarn add react-native-image-picker</code></pre>
</li>
<li><p>代码</p>
<pre><code class="jsx">import ImagePicker from &#39;react-native-image-picker&#39;;

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = &#123;
  title: &#39;Select Avatar&#39;,
  customButtons: [&#123; name: &#39;fb&#39;, title: &#39;Choose Photo from Facebook&#39; &#125;],
  storageOptions: &#123;
    skipBackup: true,
    path: &#39;images&#39;,
  &#125;,
&#125;;

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) =&gt; &#123;
  console.log(&#39;Response = &#39;, response);

  if (response.didCancel) &#123;
    console.log(&#39;User cancelled image picker&#39;);
  &#125; else if (response.error) &#123;
    console.log(&#39;ImagePicker Error: &#39;, response.error);
  &#125; else if (response.customButton) &#123;
    console.log(&#39;User tapped custom button: &#39;, response.customButton);
  &#125; else &#123;
    const source = &#123; uri: response.uri &#125;;

    // You can also display the image using data:
    // const source = &#123; uri: &#39;data:image/jpeg;base64,&#39; + response.data &#125;;

    this.setState(&#123;
      avatarSource: source,
    &#125;);
  &#125;
&#125;);</code></pre>
</li>
</ol>

      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>






    




    </div>
    <div class="copyright">
        <p class="footer-entry">
    ©2016-2020 Yelog
</p>
<p class="footer-entry">Built with <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/yelog/hexo-theme-3-hexo" target="_blank">3-hexo</a> theme</p>

    </div>
    <div class="full-toc">
        <button class="full" data-title="切换全屏 快捷键 s"><span class="min "></span></button>
<a class="" id="rocket" ></a>

    </div>
</div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.1.0" ></script>

<script src="/js/script.js?v=1.1.0" ></script>
<script>
    var img_resize = 'default';
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $("#post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        

        /*访问数量*/
        
        $.getScript("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 542px;
    }
    .nav.fullscreen {
        margin-left: -542px;
    }
    .nav-left {
        width: 120px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 492px;
        }
        .nav.fullscreen {
            margin-left: -492px;
        }
        .nav-left {
            width: 100px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 492px;
            margin-left: -492px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    

    
</style>







</html>
